Creating a Switch in Figma !

Introduction.

Switches are commonly used in digital designs, providing an intuitive and efficient way for users to toggle between two states. In this tutorial, we will learn how to create a switch in Figma, an alternative to Sketch and Adobe XD, by using its built-in tools and components.

Getting Started with a Switch!

• Open Figma and create a new file. Make the necessary components as show in the picture below.

• Make sure that the other components are inside the "Switch" frame.

• To make the switch Turn on/off, create a duplicate of the previous switch.

• Create the day and night switches by changing the components as shown below.

• Clip the components, create the components by clicking on the option "Create component set".

• Make the connections by switching to the "Prototype" mode and select the following:
  • Smart Animate, Ease in and out at 800ms for both the components.

• Create another Frame and add the "SwitchButton" component from the assets by dragging it in the frame.

• Hit the Play button next to the Toggle Button for Design and DevMode. Below is the Screen Recording of the Switch Button

Switch Button

Conclusion.

By following these steps, you have successfully created a switch in Figma that not only visually represents a digital switch but also has the functionality to toggle between states. Remember to save your file regularly and explore Figma's extensive features and tools to further enhance your digital design skills. Thank You for your time and Happy learning!